<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户信息维护</title>
  <style>
    html, body {
      width: 100%;
      overflow-y:hidden;
    }
    .modal-backdrop {
      opacity: 0 !important;
      filter: alpha(opacity=0) !important;
    }
  </style>

  <script src="../../js/jquery-2.1.1.min.js"></script>
  <link rel="stylesheet" href="../../static/css/style.css">

  <script src="../../js/jquery-2.1.1.min.js"></script>
  <!-- 新 Bootstrap4 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="../../css/bootstrap-table.min.css">
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

  <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script src="../../static/js/global.min.js"></script>
  <script src="../../js/bootstrap-table.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.21.0/locale/bootstrap-table-zh-CN.js"></script>

  <script src="../../js/jquery-form.js"></script>

  <script>
    //渲染表格
    $(function () {
      $('#table').bootstrapTable({
        //请求方式  get请求中文会乱码，建议使用post请求
        method: 'post',
        //请求头部的设置
        contentType: 'application/json',
        //路径
        url: '/queryUserAll.action',
        //设置交替行样式
        striped: true,
        //初始显示页号
        pageNumber: 1,
        //设置表格高度
        height: 650,
        //是否显示分页
        pagination: true,
        //设置是服务端分页还是客户端分页
        sidePagination: 'server',
        //页大小
        pageSize:4,
        //分页列表
        pageList:[4,6],
        //上传到服务端的参数
        queryParams: function (params) {
          return {
            // 计算页号(当前页)
            pageNum: (params.offset / params.limit) + 1,
            // 计算页大小
            pageSize: params.limit,

          };
        },
        // 定义列名
        columns: [
          {title: '选择', field: 'id', align: 'center',formatter: function (value,row,index){
              return "<input type='radio' class=\"btn btn-success\" name='radio' value="+value+">";
            }},
          {title: '编号', field: 'id', align: 'center'},
          {title: '头像', field: 'photoPath', align:'center',formatter: function (value,row,index){
            return "<img alt='加载头像失败' style='width: 65px;height: 65px' src='../../../"+value+"'/>"
            }},
          {title: '用户名', field: 'loginId', align: 'center'},
          {title: '状态', field: 'status', align: 'center',
            formatter: function (value,row,index) {
              if(value==="0"){
                return "<button class=\"btn btn-info\">正常</button>";
              }else{
                return "<button class=\"btn btn-warning\">异常</button>";
              }
            },
          },
          {title: '操作', field: 'id', align: 'center',
            formatter: function (value, row, index) {
              return "<button class='btn btn-warning' onclick='remove("+value+")'>禁用</button>";
            },

          }
        ]
      });
    })

    $(function (){
      //初始化用户信息
      var userId=0;//授权人编号
      $.ajax({
        type:'POST',
        url: '/userShow.action',
        success:function (user){
          userId=user.id;
        }
      })
      var userTagId=0;
      //授权
      $("#Authorize_and_recycle_roles").click(function () {
        var id = 0;//授权目标编号
        $("input[type='radio']").each(function () {
          if($(this).prop('checked') && $(this).val()!=userId){
            id = $(this).val();
          }
        })
        if(id > 0){
          //先要将table销毁，否则会保留上次加载的内容
          $("#role_table").bootstrapTable('destroy');
          $("th").prop("class","numeric");
          $("td").prop("class","numeric");
          //异步查询当前用户具有的角色
          $('#role_table').bootstrapTable({
            //请求方式  get请求中文会乱码，建议使用post请求
            method: 'post',
            //请求头部的设置
            contentType: 'application/json',
            //路径
            url: '/searchQueryByIdRole.action',
            //设置交替行样式
            striped: true,
            //初始显示页号
            pageNumber: 1,
            //设置表格高度
            height: 400,
            //是否显示分页
            pagination: true,
            //设置是服务端分页还是客户端分页
            sidePagination: 'server',
            //页大小
            pageSize:3,
            //分页列表
            pageList:[3,6],
            //上传到服务端的参数
            queryParams: function (params) {
              return {
                // 计算页号(当前页)
                pageNum: (params.offset / params.limit) + 1,
                // 计算页大小
                pageSize: params.limit,

                userId:userId,//授权人编号

                userTagId:id,//授权目标编号
              };
            },
            // 定义列名
            columns: [
              {title: '选择', field: 'id', align: 'center',formatter: function (value,row,index){
                  userTagId=row.userTagId;
                  if(row.userTagIds.indexOf(","+row.id+",")>-1){
                    $(this).prop("checked",true);
                    return "<input type='checkbox' checked class=\"btn btn-success\" name='radio' value="+value+">";
                  }else{
                    return "<input type='checkbox' class=\"btn btn-success\" name='radio' value="+value+">";
                  }

                }},
              {title: '编号', field: 'id', align: 'center'},
              {title: '角色名称', field: 'name', align: 'center'},
              {title: '角色说明', field: 'descn', align: 'center'},
            ]
          });
          $("#exampleModal").modal("show");
        }else{
          alert("请选择需要授权或回收角色非当前账号！！！");
        }
      });
      //授权保存
      $('#authorizeSave').click(function (){
        var check = "";
        var nocheck = "";
        $("#role_table input[type='checkbox']").each(function () {
          if($(this).prop('checked')){
            check+="&checks="+$(this).val();
          }else{
            nocheck+="&noChecks="+$(this).val();
          }
        });

        $.ajax({
          type: 'POST',
          url:'/AuthorizeOrRecycleRoles.action',
          data:'id='+userTagId+check+nocheck,
          success:function (resultData){
            if(resultData===0){
              $('#exampleModal').modal("hide");
              alert("成功操作一条数据");
            }else {
              alert("操作一条数据失败");
            }
          }
        })
      });

      $(function (){
        //新增用户

        $("#saveAccount").click(function (){
          $("form").ajaxSubmit({
            type:"post",
            url:"/hj/saveAccount.action",
            success:function (resultData) {
              if(resultData>0){
                $('#basicModal').modal("hide");
                alert("成功操作一条数据");
                $("table").bootstrapTable('refresh');
              }else {
                alert("操作一条数据失败");
              }

            },
            error:function (xhr, msg) {
              alert("文件上传太大了");
            }
          })

        });
      })


    })


  </script>
</head>
<body>

<div style="width: 100%;display: flex;justify-content: end">
  <button style="margin-right: 10px" id="save" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#basicModal">添加用户</button>
  <button id="Authorize_and_recycle_roles" type="button" class="btn btn-primary">授权并回收角色</button>
</div>
<table id="table"></table>

<div class="modal fade" id="exampleModal" tabindex="-1" style="display: none;overflow-y: auto;" aria-hidden="true">
  <div class="modal-dialog modal-lg" style="width: 100%;">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title" id="exampleModalLabel" style="width: 100%;text-align: center;">授权并回收角色</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
      </div>

      <div class="modal-body" style="height: 500px">

        <table id="role_table">

        </table>

      </div>


      <div class="modal-footer">
        <button id="authorizeSave" type="button" class="btn btn-primary"><i class="fas fa-check text-success" style="margin-right: 5px;"></i>保存</button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="fas fa-times text-danger" style="margin-right: 5px;"></i>关闭</button>
      </div>
    </div>
  </div>
</div>




<div class="modal fade" id="basicModal" style="display: none;" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" style="width: 100%;text-align: center">新增用户</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal">
        </button>
      </div>
      <form  method="post" enctype="multipart/form-data">
        <div class="modal-body">

            <div class="input-group mb-3">
              <span class="input-group-text">账号</span>
              <div class="form-file">
                <input type="text" name="loginId" class="form-control">
              </div>
            </div>

            <div class="input-group mb-3">
              <span class="input-group-text">密码</span>
              <div class="form-file">
                <input type="password" name="password" class="form-control">
              </div>
            </div>

            <div class="input-group mb-3">
              <div class="form-file">
                <input type="file" name="img" class="form-file-input form-control" multiple="multiple">
              </div>
              <span class="input-group-text">上传图片</span>
            </div>



        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Close</button>
          <button type="button" id="saveAccount" class="btn btn-primary">Save changes</button>
        </div>
      </form>

    </div>
  </div>
</div>

</body>
</html>